<template>
  <!-- 创建一个 canvas 元素，并通过 ref 进行引用 -->
  <canvas ref="canvasRef" class="canvas"/>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

// 使用 ref 创建一个响应式的 canvas 引用
const canvasRef = ref(null);

// 初始化 Canvas 和动画逻辑
const initCanvas = () => {
  // 检查 canvas 是否已经挂载
  if (!canvasRef.value) return;

  const canvas = canvasRef.value;
  const context = canvas.getContext('2d'); // 获取 2D 渲染上下文

  // 设置 Canvas 的尺寸为当前窗口大小
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  let windowWidth = window.innerWidth;
  let windowHeight = window.innerHeight;

  // 定义雨滴数组
  let rainDrops = [];

  // 定义要创建的雨滴数量
  const numberOfDrops = 50;

  // 创建雨滴类
  class RainDrop {
    constructor() {
      // 初始化雨滴的位置和速度
      this.xPosition = Math.random() * windowWidth;
      this.yPosition = Math.random() * windowHeight;
      this.fallSpeed = Math.random() * 2 + 5;
    }
    
    // 渲染雨滴
    render() {
      drawRaindropLine(this.xPosition, this.yPosition);
    }
    
    // 更新雨滴的位置
    update() {
      if (this.yPosition > windowHeight) {
        this.yPosition = 0;
        this.xPosition = Math.random() * windowWidth;
      }
      this.yPosition += this.fallSpeed;
    }
  }

  // 绘制雨滴线条的方法
  const drawRaindropLine = (x, y) => {
    context.beginPath();
    context.strokeStyle = "#cccccc"; // 设置线条颜色
    context.moveTo(x, y);
    // 从当前位置画一条线到下方30像素的位置
    context.lineTo(x, y + 30);
    context.stroke(); // 实际绘制线条
  };

  // 初始化雨滴
  const initializeRaindrops = () => {
    for (let i = 0; i < numberOfDrops; i++) {
      const drop = new RainDrop(); // 创建一个新的雨滴实例
      rainDrops.push(drop); // 将新创建的雨滴添加到数组中
    }
    animationLoop(); // 开始动画循环
  };

  // 更新并重新绘制雨滴
  const animationLoop = () => {
    context.clearRect(0, 0, windowWidth, windowHeight); // 清除整个画布
    rainDrops.forEach(drop => {
      drop.update(); // 更新每个雨滴的位置
      drop.render(); // 重新绘制每个雨滴
    });
  };

  // 开始动画循环
  let animationInterval;
  initializeRaindrops();
  animationInterval = setInterval(animationLoop, 10); // 每10毫秒更新一次动画

  // 添加窗口大小改变事件监听器
  const handleResize = () => {
    canvas.width = window.innerWidth; // 更新 canvas 的宽度
    canvas.height = window.innerHeight; // 更新 canvas 的高度
    windowWidth = window.innerWidth; // 更新窗口宽度
    windowHeight = window.innerHeight; // 更新窗口高度
  };

  window.addEventListener('resize', handleResize); // 监听窗口大小变化

  // 清理定时器并在组件卸载时移除事件监听器
  onUnmounted(() => {
    clearInterval(animationInterval); // 清除动画循环定时器
    window.removeEventListener('resize', handleResize); // 移除窗口大小变化监听器
  });
};

// 当组件被挂载到 DOM 后执行初始化函数
onMounted(initCanvas);
</script>

<!-- 样式设置 -->
<style scoped>
.canvas {
  /* position: relative; */
  width: 100%; 
  height: 100%; 
  /* background-color: rgb(75, 111, 211);  */
}
</style>